/* 公共样式 */
.zc-inline-block {
	display: inline-block; !important;
}
.zc-left {
	float: left;
}
.zc-right {
	float: right;
}
.zc-colorpicker-main, .zc-colorpicker-main * {
	margin: 0;
	padding: 0;
	color: #666666;
	font-size: 12px;
}
.zc-colorpicker-main>div {
	width: 280px;
}
.zc-colorpicker-main input,
.zc-colorpicker-main button {
	border-width: 1px;
	border-style: solid;
	height: 30px;
	padding: 0 10px;
	outline: 0;
	-webkit-appearance: none;
	transition: all .3s;
	-webkit-transition: all .3s;
	box-sizing: border-box;
	border-radius: 2px;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}


/* 跟节点 */
.zc-colorpicker-main {
	display: inline-block;
	padding: 8px;
	border: 1px solid #EEEEEE;
	box-shadow: 0 2px 15px 1px #C2C2C2;
	position: absolute;
  background-color: #FFFFFF;
}
.zc-colorpicker-wrapper {
	height: 267px;
}
/* 颜色选择器 */
.zc-colorpicker-panel {
	width: 257px;
	height: 257px;
	/* background-color: aquamarine; */
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.zc-colorpicker-panel-handle {
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 100%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 2px #C2C2C2;
}
/* 色域选择器（彩色条） */
.zc-colorpicker-colorbar {
	/* background-color: blueviolet; */
	width: 12px;
	height: 257px;
	position: relative;
	cursor: pointer;
}
.zc-colorpicker-colorbar-handle {
	width: 100%;
	height: 6px;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-50%);
	box-shadow: 0 0 2px #C2C2C2;
}
/* 透明度选择器 */
.zc-colorpicker-alpha {
	height: 10px;
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
}
.zc-colorpicker-alpha-handle {
	width: 6px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 100%;
	transform: translateX(-50%);
	background-color: #FFFFFF;
	box-shadow: 0 0 2px #C2C2C2;
}
/* 预定义颜色组 */
.zc-colorpicker-colors {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.zc-colorpicker-colors>span {
	width: 20px;
	height: 20px;
	border-radius: 2px;
	display: inline-block;
	cursor: pointer;
	margin-bottom: 6px;
}
.zc-colorpicker-colors>span:not(:nth-of-type(11n)) {
	margin-right: 6px;
}
/* 输出框 && 按钮 */
.zc-colorpicker-input-groups {
	display: flex;
}
.zc-colorpicker-input {
	width: 160px;
	border-color: #C2C2C2;
}
.zc-colorpicker-btn-default {
	margin-left: 20px;
	cursor: pointer;
	border-color: #C2C2C2;
	background-color: #FFFFFF;
}
.zc-colorpicker-btn-success {
	margin-left: 8px;
	cursor: pointer;
	border-color: #5FB878;
	background-color: #5FB878;
	color: #FFFFFF;
}